<template>
  <!--
    click 不好用: 组件上事件别看名字叫click 都是自定义事件,需要组件内$emit触发
    click.native 组件内跟标签上绑定了一个原生的click
    trigger 触发下拉的行为(click,hover)
    @command (事件) 点击菜单项触发的事件回调
   -->
  <el-dropdown trigger="click" @command="changeLanguage">
    <div>
      <svg-icon style="color:#fff;font-size:20px" icon-class="language" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <!-- command(属性) 指令的标记(这个指令是英文的中文含义 不是vue语法里的v-开头属性指令 无关系)点击哪个项 就把command值传递到@command事件的方法形参上
      $i18n和$t 拿到new的时候/后续改变的时候 locale语言的标记'zh','en'
      :disabled判断 ,中文状态下,中文选择不能点击
      -->
      <el-dropdown-item command="zh" :disabled="'zh'=== $i18n.locale ">中文</el-dropdown-item>
      <el-dropdown-item command="en" :disabled="'en'=== $i18n.locale ">English</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang // 设置给本地的i18n插件
      this.$message.success('切换多语言成功')
    }
  }
}
</script>

